<template>
  <div class="map-monitor-agv-panel bg-white-6 absolute-top-right full-height">
    <q-scroll-area :visible="false" class="fit">
      <q-tabs v-model="currentTab" active-color="primary" align="justify" breakpoint="0" class="bg-grey-1 sticky-top"
              dense inline-label outside-arrows>
        <q-tab v-for="state in tabs" :key="state.value" :label="state.label" :name="state.value"
               class="q-px-xs rounded-borders" />
      </q-tabs>
      <q-tab-panels v-model="currentTab" animated class="bg-transparent">
        <q-tab-panel v-for="state in tabs" :key="state.value" :name="state.value" class="no-padding overflow-hidden">
          <template v-for="row in rows || []" :key="row.agvCode">
            <q-separator class="q-mx-sm q-my-xs"></q-separator>
            <q-item :class="['ERROR', 'EMERGENCY'].includes(row.amrStatus) ? 'bg-red-1' : 'bg-grey-2'"
                    class="q-pa-sm rounded-borders text-caption text-black" clickable @click="rowClick(row)">
              <q-item-section class="text-grey-5 col-auto">
                <q-item-label class="row items-center">{{ `${$t('AGVCore.AGVBrand')}` }}</q-item-label>
                <q-item-label class="row items-center">{{ `${$t('AGVCore.AGVStatus')}` }}</q-item-label>
                <q-item-label class="row items-center">{{ `${$t('AGVCore.CurrentSpeed')}` }}</q-item-label>
              </q-item-section>
              <q-item-section>
                <q-item-label class="row items-center">
                  <qx-tooltip>{{ row.agvBrandCode }}</qx-tooltip>
                </q-item-label>
                <q-item-label class="row items-center">
                  <q-badge :color="colorInfo(row.amrStatus).color || 'grey-4'" class="q-badge-dot q-mr-xs" rounded />
                  {{ colorInfo(row.amrStatus).label || $t('Unknown') }}
                </q-item-label>
                <q-item-label class="row items-center">
                  <qx-tooltip>{{ row.agvSpeed || 0 }}mm/s</qx-tooltip>
                </q-item-label>
              </q-item-section>
              <q-item-section class="text-grey-5 col-auto">
                <q-item-label class="row items-center">{{ `${$t('AGVCore.AGVCode')}` }}</q-item-label>
                <q-item-label class="row items-center">{{ `${$t('AGVCore.CurrentPower')}` }}</q-item-label>
                <q-item-label class="row items-center">{{ `${$t('AGVCore.AlarmDescription')}` }}</q-item-label>
              </q-item-section>
              <q-item-section>
                <q-item-label class="row items-center">
                  <qx-tooltip>{{ row.agvCode }}</qx-tooltip>
                </q-item-label>
                <q-item-label class="row items-center">
                  <qx-tooltip>{{ row.battery || 0 }}%</qx-tooltip>
                </q-item-label>
                <q-item-label class="row items-center">
                  <qx-tooltip>
                    {{ ['ERROR', 'EMERGENCY'].includes(row.amrStatus) ? row.originalWarnDesc : '' }}
                  </qx-tooltip>
                </q-item-label>
              </q-item-section>
            </q-item>
          </template>
          <MEmpty v-if="!rows.length" classes="q-mt-md"></MEmpty>
        </q-tab-panel>
      </q-tab-panels>
    </q-scroll-area>
    <div class="map-monitor-shrink absolute bg-grey-2 row justify-center items-center cursor-pointer cursor-hover"
         @click.stop="handleShrink">
      <q-icon :class="expand ? '' : 'rotate-180'" color="grey-6" name="double_arrow" size="1.2rem"></q-icon>
    </div>
  </div>
</template>

<script setup>
import { useTimeout } from 'quasar'
import { AGVStatus } from 'src/enum/index.js'
import { exportAttrs } from 'src/views/MapCore/MapGlobal/utils/KonvaEvent.js'
import { zoomCanvasByFindPoint } from 'src/views/MapCore/MapGlobal/utils/MouseEvent.js'
import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({ data: { type: Array, default: () => [] } })
const expand = ref(false)
const isXS = inject('isXS')
const currentTab = ref('')
const tabs = computed(() => AGVStatus.value.filter(el => el.value !== 'TOTALS'))
const colorInfo = computed(() => el => AGVStatus.value.find(item => item.value === el) || {})
const rows = computed(() => props.data.filter(el => el.amrStatus === currentTab.value))

const { registerTimeout, removeTimeout } = useTimeout()

onMounted(() => {
  registerTimeout(() => {
    expand.value = props.data.length && !isXS.value
    currentTab.value = props.data[0]?.amrStatus || 'RUNNING'
  }, 100)
})
watch(props.data, (val, oldValue) => {
  if (isXS.value) return
  if (val.length && !oldValue.length) {
    expand.value = true
    if (!currentTab.value || !rows.value.length) currentTab.value = props.data[0]?.amrStatus || 'RUNNING'
  }
})
onUnmounted(() => removeTimeout && removeTimeout())
const handleShrink = () => (expand.value = !expand.value)
const rowClick = row => {
  const { CANVAS } = exportAttrs(), point = { position: () => ({ x: row.posX, y: row.posY }) }
  zoomCanvasByFindPoint(CANVAS, point, 300)
}
</script>
<style lang="scss" scoped>
.map-monitor-agv-panel {
  width: 18.75rem;
  right: v-bind('`${expand ? "0rem" : "-18.75rem"}`');
}

.q-scrollarea {
  padding-top: 5rem;

  &:deep(.q-scrollarea__content) {
    width: inherit;
  }
}

.q-item__label {
  min-height: 1rem;
}

.map-monitor-shrink {
  left: -1.25rem;
}
</style>